<script setup lang="ts">
import { download, get, loadFile, message, post, checkBtnPermission } from '@/utils'
import CommentList from './components/CommentList.vue'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import { Image } from '@arco-design/web-vue'
import TopicModal from './components/TopicModal.vue'
import AuditModal from '@/components/Modal/Audit.vue'
import { BtnPermission } from '@/enum/permission'
const { store } = useModal()
const { store: auditStore } = useModal()
const { store: listStore } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({
  userId: '',
})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-social/admin/topic/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const columns = formatColumns([
  {
    title: '发布用户',
    dataIndex: 'user',
    fixed: 'left',
    children: [
      {
        title: '用户头像',
        dataIndex: 'userAvatar',
        valueType: 'image',
        width: 100,
      },
      {
        title: '用户昵称',
        dataIndex: 'userNickName',
        width: 200,
        formSlotName: 'userNickName1',
        hideInSearch: false,
      },
    ],
  },
  {
    title: 'ID',
    dataIndex: 'id',
    width: 200,
  },
  {
    title: '标题',
    dataIndex: 'title',
    width: 200,
    hideInSearch: false,
  },

  {
    title: '发布图片',
    dataIndex: 'img',
    width: 100,
    render: ({ record }) => {
      return h(Image, { src: record.img.split(',')[0], width: '40', height: '40' }, '')
    },
  },
  {
    title: '内容',
    dataIndex: 'content',
    width: 200,
    hideInSearch: false,
    ellipsis: true,
  },

  {
    title: '点赞量',
    dataIndex: 'likeNum',
    width: 150,
    sorter: true,
  },

  {
    title: '允许评论',
    dataIndex: 'isComment',
    width: 100,
    valueEnum: {
      0: { text: '否', status: 'Error' },
      1: { text: '是', status: 'Success' },
    },
  },
  {
    title: '是否显示',
    dataIndex: 'isShow',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 120,
    hideInSearch: false,
    valueEnum: {
      '-1': { text: '审核拒绝', status: 'Error' },
      0: { text: '待审核', status: 'Processing' },
      1: { text: '审核通过', status: 'Success' },
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 200,
  },
  {
    title: '审核备注',
    dataIndex: 'remark',
    width: 200,
  },

  {
    title: '操作',
    dataIndex: 'options',
    width: 300,
    fixed: 'right',
    btnList: [
      {
        name: '查看',
        permission: BtnPermission.查看,
        handle: ({ record }) => store.handleShow(record),
      },
      {
        name: '审核',
        permission: BtnPermission.审核,
        disabled: ({ record }) => record.status != 0,
        handle: ({ record }) => {
          auditStore.handleShow(record)
        },
      },

      {
        name: '删除',
        type: 'popconfirm',
        permission: BtnPermission.删除,
        tip: '确认删除该数据吗?',
        handle: ({ record }) => {
          console.log('编辑')
          post({ url: '/server-social/admin/topic/remove?ids=' + record.id }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
      {
        name: '评论管理',
        permission: BtnPermission.查看,
        handle: ({ record }) => listStore.handleShow(record),
      },
    ],
  },
])
const changeShow = (id, isShow) => {
  if (!checkBtnPermission(BtnPermission.编辑)) return false
  post({ url: '/server-social/admin/topic/show', data: { id, isShow } }, ({ code, msg }) => {
    if (code == 200) actionRef.value.reload()
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
</script>

<template>
  <div class="page">
    <ProTable
      :columns="columns"
      :request="request"
      @reset="searchQuery.userId = ''"
      row-key="id"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=""
      column-resizable
      :scroll="{ x: 1000 }"
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #userNickName1>
        <AllowSearch v-model:val="searchQuery.userId" api="/server-user/admin/user/page" search-key="nickName" :fieldNames="{ label: 'nickName', value: 'id' }" />
      </template>
      <template #isShow="{ record }">
        <a-switch v-model="record.isShow" :checked-value="1" :unchecked-value="0" :before-change="val => changeShow(record.id, val)">
          <template #checked> 显示 </template>
          <template #unchecked> 隐藏 </template>
        </a-switch>
      </template>
    </ProTable>
    <AuditModal api="/server-social/admin/topic/audit" v-if="auditStore.show" idKey="id" v-model:show="auditStore.show" :id="auditStore.id" @confirm="actionRef.reload" />
    <CommentList v-if="listStore.show" v-model:show="listStore.show" :id="listStore.id" />
    <TopicModal v-if="store.show" v-model:show="store.show" :id="store.id" />
  </div>
</template>
